<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/webim/">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>消息盒子</title>

<link rel="stylesheet" href="static/css/layui.css">
<style>
.layim-msgbox{margin: 15px;}
.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
.layim-msgbox li p span{padding-left: 5px; color: #999;}
.layim-msgbox li p em{font-style: normal; color: #FF5722;}
.lay_page{position: fixed;bottom: 0;margin-left: -15px;margin-bottom: 20px;background: #fff;width: 100%;}
.layui-laypage{width: 105px;margin:0 auto;display: block}
.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
.layim-msgbox-user{padding-top: 5px;}
.layim-msgbox-content{margin-top: 3px;}
.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
</style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>


<script  id="LAY_tpl"  type="text/html">
{{# layui.each(d.notifies, function(index, item){
  if(item.from){ }}
    <li data-uid="{{ item.from }}" data-fromGroup="{{ item.groupid }}" data-index="{{index}}">
      <a href="/u/{{ item.from }}/" target="_blank">
        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
      </a>
      <p class="layim-msgbox-user">
        <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
        <span>{{ item.timestamp }}</span>
      </p>
      <p class="layim-msgbox-content">
			{{#  if(item.type == 1){ }}
 				申请添加您为好友
			{{#  } else if(item.type == 3) { }}
  				申请加群《{{ item.bevyName }}》
			{{#  } else { }}
  				系统消息
			{{#  } }}   
        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
      </p>
    </li>
  {{# } else { }}
    <li class="layim-msgbox-system">
      <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
    </li>
  {{# }

}); }}
<li class="layim-msgbox-tips">暂无更多新消息</li>
</script>

<div class="lay_page" id="LAY_page" ></div>	

<script src="static/layui.js"></script>
<script>
layui.use(['layim', 'flow'], function(){
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,flow = layui.flow;

  var cache = []; //用于临时记录请求到的数据  
  $.get('checkFriendGroup',  function(res){
	
      if(res.code == 0){
    	  $.each(res.data.notifies,function(index,value){
    		  var unixTimestamp = new Date(parseInt(value.timestamp)) ;
    		  value.timestamp = unixTimestamp.toLocaleString();
    	  });
    	  cache = res.data.notifies;
    	  var getTpl = LAY_tpl.innerHTML,
    	  		view = document.getElementById('LAY_view');
    	  laytpl(getTpl).render(res.data, function(html){
    	    view.innerHTML = html;
    	  });
      }
  })

  //操作
  var active = {
    //同意
    agree: function(othis){
      var li = othis.parents('li')
      ,uid = li.data('uid')
      ,index = li.data('index')
      ,from_group = li.data('fromgroup')
      ,user = cache[index].user
	  ,category = cache[index].type
	  ,notifieid = cache[index].id
      ,groupid = cache[index].groupid;
      if(category==1){
    	  //选择分组
          parent.layui.layim.setFriendGroup({
            type: 'friend'
            ,username: user.username
            ,avatar: user.avatar
            ,group: parent.layui.layim.cache().friend //获取好友分组数据
            ,submit: function(group, index){
              
              //将好友追加到主面板
              parent.layui.layim.addList({
                type: 'friend'
                ,avatar: user.avatar //好友头像
                ,username: user.username //好友昵称
                ,groupid: group //所在的分组id
                ,id: uid //好友ID
                ,sign: user.sign //好友签名
              });
              parent.layer.close(index);
              othis.parent().html('已同意');
            

              $.post('addFriend', {
                uid: uid //对方用户ID
                ,from_group: from_group //对方设定的好友分组
                ,group: group //我设定的好友分组
                ,notifieid:notifieid
              }, function(res){
                if(res.code != 0){
                  return layer.msg(res.msg);
                }
            });
           }
          });
      }else{
    	  //申请加群
     	$.get("getBevyInfo",{"id":groupid},function(res){
     		layer.confirm('确定同意吗？', function(index){
     	        $.post('addBevy', {
     	        	notifieid: notifieid //对方用户ID
     	        }, function(res){
     	          if(res.code != 0){
     	            return layer.msg(res.msg);
     	          }
     	          layer.close(index);
     	          othis.parent().html('<em>已同意</em>');
     	        });
     	      });
      });
    }
 }
    //拒绝
    ,refuse: function(othis){
      var li = othis.parents('li')
      ,uid = li.data('uid')
      ,index = li.data('index')
      ,notifieid = cache[index].id;
      layer.confirm('确定拒绝吗？', function(index){
        $.get('refuseFriend', {
        	notifieid: notifieid //对方用户ID
        }, function(res){
          if(res.code == 0){
        	  layer.close(index);
              othis.parent().html('<em>已拒绝</em>');
          }else{
        	  layer.close(index);
              othis.parent().html('<em>未拒绝</em>');
          }
        });
      });
    }
  };

  $('body').on('click', '.layui-btn', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});

toLocaleString = function() {
    return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分" + this.getSeconds() + "秒";
};
</script>
</body>
</html>
